<template>
    <div>
      <UserForm @search="search" :is-loading="loadingData" :isExporting="state.exportLoading" />
      <div class="showtable">
        <el-table border style="width: 100%;" :data="tableData" v-loading="loadingData" size="small">
          <el-table-column v-for="(item, index) in theader" :width="item.width || ''" :key="index" :align="item.align || ''"
            :label="item.label" :prop="item.prop">
            <template #default="scope" v-if="item.prop == 'user'">
              <p>{{ scope.row.user_id }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'card'">
              <p>{{ scope.row.card_number }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'expire_date'">
              <p>{{ scope.row.expire_date }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'email'">
              <p>{{ scope.row.user_email }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'user_abnormal'">
              <p>未完成支付：{{ scope.row.abnormal.order_num }}</p>
              <p>进行中的活动：{{ scope.row.abnormal.activity_num }}</p>
              <p>异常单：{{ scope.row.abnormal.except_order_num }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'user_status'">
              <p>{{ scope.row.user_status == 1 ? '正常' : '异常' }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'register_time'">
              <p>{{ scope.row.create_time }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'last_request_time'">
              <p>{{ scope.row.last_request_time }}</p>
            </template>
            <template #default="scope" v-if="item.prop == 'handle'">
              <el-button type="primary" size="small" @click.stop="toDetails(scope.row.user_id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page flexCenter">
        <el-pagination background layout="prev, pager, next, jumper, total" @current-change="pageChange" @prev-click="pageChange"
          @next-click="pageChange" :total="state.count" :page-size="state.searchLimit.limit" />
      </div>
      <!-- 详情 -->
    </div>
  </template>
  <script setup>
  import UserForm from './components/UserForm.vue';

  import { ref, reactive, onBeforeMount } from 'vue';
  import { userList } from '@/api/userManage/userManage';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  const router = useRouter();
  const theader = ref([
    { prop: 'user', label: '用户编号' },
    { prop: 'card', label: '银行卡号', },
    { prop: 'expire_date', label: '有效期', },
    { prop: 'email', label: '邮箱', width: '120px' },
    { prop: 'user_abnormal', label: '异常消费' },
    { prop: 'user_status', label: '消费状态' },
    { prop: 'register_time', label: '创建时间', align: 'center', width: '170px' },
    { prop: 'last_request_time', label: '最近消费时间', align: 'center', width: '170px' },

    { prop: 'handle', label: '操作', width: '80px', align: 'center' },
  ])
  const loadingData = ref(false);
  const btnLoading = ref(false);
  const tableData = ref([])
  const current_user_no = ref('');
  const state = reactive({
    form: {},
    searchLimit: {
      page: 1,
      limit: 10
    },
    count: 0,
    exportLoading: false,
    exportLimit: {
      page: 1,
      limit:200,
      pageCount:1
    }
  })
  // methods
  
  const search = async (form) => {
    btnLoading.value = true;
    state.form = form
    getList()
  }
  
  const getList = async () => {
    loadingData.value = true;
    const res = await userList({ ...state.searchLimit, ...state.form })
    if (res.code === 1000) {
      tableData.value = res.data.listData.list
      state.count = res.data.listData.count
    }
    btnLoading.value = false;
    loadingData.value = false;
  }
  
  const toDetails = (user_no) => {
    router.push({ name: 'UserDetail', query: { user_no } })
  }
  const pageChange = (page) => {
    state.searchLimit.page = page
    getList()
  }
  
  // life cycle
  onBeforeMount(() => {
    getList()
  })
  
  </script>
  <style lang="less" scoped>
  .showtable {
    margin: 0 20px;
  }
  
  .page {
    margin: 20px;
  }
  </style>